<template>
  <div>
    <div class="table-page-search-wrapper">
      <div>
        <a-form layout="inline">
          <know-topnav />
        </a-form>
      </div>
      <div class="knowledge-search">
        <a-form layout="inline">
          <a-row :gutter="24">
            <template>
              <a-col :md="9" :sm="12" style="float: left;overflow: hidden;">
                <a-input placeholder="请输入查询内容"></a-input>
              </a-col>
              <a-button type="primary" icon="search">查询</a-button>
            </template>
          </a-row>
        </a-form>
      </div>
      <a-form layout="inline">
        <a-row :gutter="24">
          <template>
            <a-col :md="17" :sm="20" style="float: left;overflow: hidden;">
              <div class="knowledge-details">
                <a-form layout="inline">
                  <a-row :gutter="24">
                    <template>
                      <a-col :md="3" :sm="4" style="float: left;overflow: hidden;">
                        <p>用药建议</p>
                      </a-col>
                      <a-col :md="21" :sm="20" class="knowledge-details-name">
                        <a-row
                          :gutter="24"
                          class="knowledge-details-name-frist knowledge-details-name-line"
                        >
                          <a-col :md="24" :sm="12" style="float: left;overflow: hidden;">
                            <li>呼吸内科</li>
                            <li>急诊科</li>
                            <li>心血管内科</li>
                            <li>内分泌科</li>
                            <li>消化内科</li>
                            <li>血液科</li>
                            <li>风湿免疫科</li>
                            <li>肾内科</li>
                            <li>神经内科</li>
                            <li>神经外科</li>
                          </a-col>
                        </a-row>
                        <a-row :gutter="24" class="knowledge-details-name-line">
                          <a-col :md="24" :sm="12" style="float: left;overflow: hidden;">
                            <li>普通外科</li>
                            <li>心血管科</li>
                            <li>妇科</li>
                            <li>泌尿外科</li>
                            <li>骨科</li>
                            <li>妇产科</li>
                            <li>眼科</li>
                            <li>耳鼻喉科</li>
                            <li>皮肤科</li>
                            <li>儿科</li>
                            <li>口腔科</li>
                          </a-col>
                        </a-row>
                      </a-col>
                    </template>
                  </a-row>
                </a-form>
              </div>
            </a-col>
          </template>
          <template>
            <div class="knowledge-classification">
              <a-row :gutter="24">
                <template>
                  <a-col
                    :md="3"
                    :sm="4"
                    style="float: left;overflow: hidden;"
                    class="knowledge-classification-left"
                  >
                    <p>字母</p>
                  </a-col>
                  <a-col
                    :md="21"
                    :sm="20"
                    style="float: left;overflow: hidden;"
                    class="knowledge-classification-right"
                  >
                    <a href="#aa">A</a>
                    <a href="#bb">B</a>
                    <a href="#dd">D</a>
                    <a href="#ee">E</a>
                    <a href="#ff">F</a>
                    <a href="#gg">G</a>
                    <a href="#hh">H</a>
                    <a href="#ii">I</a>
                    <a href="#jj">J</a>
                    <a href="#kk">K</a>
                    <a href="#mm">M</a>
                    <a href="#qq">Q</a>
                    <a href="#yy">Y</a>
                    <a href="#zz">Z</a>
                  </a-col>
                </template>
              </a-row>
            </div>
          </template>
        </a-row>
      </a-form>
    </div>
    <div class="classification-details">
      <div class="classification-details-inner">
        <div class="classification-details-inner-a" id="aa">
          <span>A</span>
          <li>凹陷性骨折</li>
          <li>鞍旁脑膜瘤</li>
          <li>癌性疼痛</li>
          <li>艾滋病</li>
        </div>
        <div class="classification-details-inner-a" id="bb">
          <span>B</span>
          <li>凹陷性骨折</li>
          <li>鞍旁脑膜瘤</li>
          <li>癌性疼痛</li>
          <li>艾滋病</li>
        </div>
        <div class="classification-details-inner-a" id="cc">
          <span>C</span>
          <li>凹陷性骨折</li>
          <li>鞍旁脑膜瘤</li>
          <li>癌性疼痛</li>
          <li>艾滋病</li>
        </div>
        <div class="classification-details-inner-a" id="dd">
          <span>D</span>
          <li>凹陷性骨折</li>
          <li>鞍旁脑膜瘤</li>
          <li>癌性疼痛</li>
          <li>艾滋病</li>
        </div>
        <div class="classification-details-inner-a" id="ee">
          <span>E</span>
          <li>凹陷性骨折</li>
          <li>鞍旁脑膜瘤</li>
          <li>癌性疼痛</li>
          <li>艾滋病</li>
        </div>
        <div class="classification-details-inner-a" id="ff">
          <span>F</span>
          <li>凹陷性骨折</li>
          <li>鞍旁脑膜瘤</li>
          <li>癌性疼痛</li>
          <li>艾滋病</li>
        </div>
        <div class="classification-details-inner-a" id="gg">
          <span>G</span>
          <li>凹陷性骨折</li>
          <li>鞍旁脑膜瘤</li>
          <li>癌性疼痛</li>
          <li>艾滋病</li>
        </div>
        <div class="classification-details-inner-a" id="hh">
          <span>H</span>
          <li>凹陷性骨折</li>
          <li>鞍旁脑膜瘤</li>
          <li>癌性疼痛</li>
          <li>艾滋病</li>
        </div>
        <div class="classification-details-inner-a" id="ii">
          <span>I</span>
          <li>凹陷性骨折</li>
          <li>鞍旁脑膜瘤</li>
          <li>癌性疼痛</li>
          <li>艾滋病</li>
        </div>
        <div class="classification-details-inner-a" id="jj">
          <span>J</span>
          <li>凹陷性骨折</li>
          <li>鞍旁脑膜瘤</li>
          <li>癌性疼痛</li>
          <li>艾滋病</li>
        </div>
        <div class="classification-details-inner-a" id="kk">
          <span>K</span>
          <li>凹陷性骨折</li>
          <li>鞍旁脑膜瘤</li>
          <li>癌性疼痛</li>
          <li>艾滋病</li>
        </div>
        <div class="classification-details-inner-a" id="mm">
          <span>M</span>
          <li>凹陷性骨折</li>
          <li>鞍旁脑膜瘤</li>
          <li>癌性疼痛</li>
          <li>艾滋病</li>
        </div>

        <div class="classification-details-inner-a" id="qq">
          <span>Q</span>
          <li>凹陷性骨折</li>
          <li>鞍旁脑膜瘤</li>
          <li>癌性疼痛</li>
          <li>艾滋病</li>
        </div>
        <div class="classification-details-inner-a" id="yy">
          <span>Y</span>
          <li>凹陷性骨折</li>
          <li>鞍旁脑膜瘤</li>
          <li>癌性疼痛</li>
          <li>艾滋病</li>
        </div>
        <div class="classification-details-inner-a" id="zz">
          <span>Z</span>
          <li>凹陷性骨折</li>
          <li>鞍旁脑膜瘤</li>
          <li>癌性疼痛</li>
          <li>艾滋病</li>
        </div>
      </div>
    </div>
    <company-profile />
  </div>
</template>

<script>
import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'
import CompanyProfile from '../../components/knowlage/companyProfile'
import KnowTopnav from '../../components/knowlage/knowtopnav'


export default {
  name: 'DepsettingModal',
  components: {
    CompanyProfile,
    KnowTopnav

  },
  data() {
    return {}
  },
  created() {
    console.log(window.scrollTop)
  },
  methods: {}
}
</script>

<style lang="less" scoped>
@import '~@assets/less/common.less';
.table-page-search-wrapper {
  width: 100%;
  background-color: #fff;
  padding-top: 10px;
  padding-left: 32px;
  padding-bottom: 30px;

  .knowledge-top-search {
    margin-left: -40px;

    li {
      font-size: 16px;
      display: inline;
      margin-right: 35px;
      color: #333;
    }
    li:hover {
      color: #38c3c8;
    }
  }
  .knowledge-search {
    margin-top: 30px;
    padding-bottom: 20px;
  }
  .knowledge-details {
    padding-top: 20px;
    border: 1px #ebeef5 solid;
    border-bottom: 1px dashed #ebeef5;

    p {
      font-size: 16px;
      width: 76px;
      height: 32px;
      background-color: #d3f2f4;
      color: #38c3c8;
      text-align: center;
      line-height: 32px;
      border-radius: 4px;
      margin-left: 20px;
    }
    .knowledge-details-name {
      margin-left: -20px;
      li {
        display: inline;
        padding: 5px;
        margin-right: 2.5%;
        font-size: 14px;
        color: #333;
      }
      li:hover {
        background-color: #38c3c8;
        color: #fff;
      }
      li:last-child {
        display: inline;
        margin-right: 0px;
      }
      .knowledge-details-name-line {
        line-height: 22px;
        font-size: 14px;
        padding-bottom: 20px;
      }
    }
  }
  .knowledge-classification {
    width: 1126px;
    border: 1px #ebeef5 solid;
    border-top: none;
    margin-left: 12px;
    height: 72px;
    margin-top: 106px;

    .knowledge-classification-left {
      margin-top: 20px;
    }
    .knowledge-classification-right {
      margin-top: 24px;
      font-size: 16px;
      margin-left: -20px;

      a {
        display: inline;
        padding: 10px;
        margin-right: 2.5%;
        color: #333;
      }
      a:hover {
        background-color: #38c3c8;
        color: #fff;
      }
    }

    p {
      font-size: 16px;
      width: 76px;
      height: 32px;
      background-color: #d3f2f4;
      color: #38c3c8;
      text-align: center;
      line-height: 32px;
      border-radius: 4px;
      margin-left: 20px;
    }
  }
}
.classification-details {
  width: 100%;
  background-color: #fff;
  margin-top: 8px;
  padding-top: 20px;
  padding-left: 32px;
  padding-bottom: 30px;

  .classification-details-inner {
    width: 1126px;
    border: 1px #ebeef5 solid;

    .classification-details-inner-a {
      display: flex;
      height: 75px;
      line-height: 75px;
      border-bottom: 1px dashed #ebeef5;

      li {
        list-style: none;
        font-size: 14px;
        margin-right: 30px;
        color: #333;
      }
      li:hover {
        color: #38c3c8;
      }
      span {
        font-size: 32px;
        width: 112px;
        font-weight: 400;
        text-align: center;
        color: #38c3c8;
      }
    }
    .classification-details-inner-a:last-child {
      border-bottom: none;
    }
  }
}
</style>